<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AI Cloud</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>

<style>
    .disscuss-add-btn {
        width: 300px;
        transition: all 0.3s ease; /* 过渡效果，所有属性在0.3秒内平滑变化 */
    }

    .disscuss-add-btn:hover {
        background-color: #09b4aa; /* 悬停时的背景颜色 */
        color: white; /* 悬停时的文字颜色 */
        width: 320px;
    }

    .disscuss-add-btn2:hover {
        background-color: #09b4aa; /* 悬停时的背景颜色 */
        color: white; /* 悬停时的文字颜色 */
    }

    a {
        cursor: default; /* 默认情况下，鼠标指针为箭头形状 */
    }

    a:hover {
        cursor: default; /* 鼠标悬停时，鼠标指针也为箭头形状 */
    }

</style>

<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">AI Cloud</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul id="chat-nav" class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-chatgpt-content"><a
                    href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-tongyi-content"><a
                    href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-xunfei-content"><a
                    href="javascript:;">讯飞星火</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="chat-wenxin-content"><a
                    href="javascript:;">文心一言</a></li>
        </ul>
        <ul id="draw-nav" class="layui-nav layui-layout-left" style="display: none;">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content"
                lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-tongyi-content"><a
                    href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-xunfei-content"><a
                    href="javascript:;">讯飞星火</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="draw-wenxin-content"><a
                    href="javascript:;">文心一言</a></li>
        </ul>
        <ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none;">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a
                    href="javascript:;">推荐</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a
                    href="javascript:;">最新</a></li>
        </ul>
        <ul id="add-discuss-nav" class="layui-nav layui-layout-left" style="display: none;">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <div id="userinfo">
                    <a href="javascript:;">
                        <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                        <span id="username_span"></span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">设置</a></dd>
                        <dd lay-on="logout"><a href="javascript:;">退出</a></dd>
                    </dl>
                </div>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">AI 工具箱</a>
                    <dl class="layui-nav-child">
                        <dd><a class="layui-this" href="javascript:;" lay-on="chat-nav-show">对话</a></dd>
                        <dd><a href="javascript:;" lay-on="draw-nav-show">绘图</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">话题讨论</a>
                    <dl class="layui-nav-child">
                        <dd><a lay-on="discuss-nav-show" class="" href="javascript:;">话题列表</a></dd>
                        <dd><a lay-on="show-my-discuss-list" href="javascript:;">我的话题</a></dd>
                        <dd><a lay-on="add-discuss" href="javascript:;">发表话题</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">关于</a></li>
            </ul>
            <div id="unlogin_btn_div" style="position: absolute;bottom: 40px;text-align: center;width: 85%;">
                <button type="button" class="layui-btn layui-btn-lg" lay-on="doLogin"
                        style="background-color: rebeccapurple;border-radius: 8px;">未登录
                </button>
            </div>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px;padding-bottom: 80px;">
            <div>
                <!--chat div-->
                <div id="chat-chatgpt-content">
                </div>
                <div id="chat-tongyi-content" style="display: none;">

                </div>
                <div id="chat-xunfei-content" style="display: none;">

                </div>
                <div id="chat-wenxin-content" style="display: none;">

                </div>
                <!--draw div-->
                <div id="draw-chatgpt-content" style="display: none;">

                </div>
                <div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none;">

                </div>
                <div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none;">

                </div>
                <div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none;">

                </div>
                <!--话题讨论 div-->
                <div id="discuss-content" class="layui-card layui-panel" style="display: none;">
                    <div class="layui-card-header layui-font-16">
                        推荐话题讨论
                    </div>
                    <div class="layui-card-body">
                        讨论详情
                    </div>
                </div>
                <div id="add-discuss-content" style="display: none;">
                    <div class="layui-input-group" style="width: 80%;margin-top: 30px">
                        <div class="layui-input-prefix" style="width: 200px;">标题</div>
                        <input id="discuss-title-input" type="text" placeholder="请输入标题" class="layui-input">
                    </div>
                    <div class="layui-input-group" style="width: 80%;margin-top: 40px">
                        <div class="layui-input-prefix" style="width: 200px;">正文</div>
                        <textarea id="discuss-content-input" style="height: 430px;" placeholder="请输入话题内容"
                                  class="layui-textarea"></textarea>
                    </div>
                    <div style="margin-top: 40px;text-align: center">
                        <button type="button" lay-on="doAddDiscuss"
                                class="disscuss-add-btn layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">添加
                        </button>
                    </div>
                </div>
                <div id="my-discuss-content" style="display: none;">
                    <div class="layui-bg-gray" style="padding: 16px;">
                        <div id="my-discuss-div" class="layui-row layui-col-space15">

                        </div>
                    </div>
                </div>
                <div id="discuss-content-new" class="layui-card layui-panel" style="display: none;">
                    <div class="layui-card-header layui-font-16">
                        最新话题讨论
                    </div>
                    <div class="layui-card-body">
                        最新话题讨论详情
                    </div>
                </div>
                <div id="discuss-detail-div" style="padding-bottom: 100px;padding-left: 40px;display: none;">

                </div>
            </div>
        </div>
    </div>
    <div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
        <!-- 底部固定区域 -->
        <div class="layui-form-item" style="width: 80%">
            <div class="layui-input-group" style="width: 100%;">
                <input id="question-input" style="margin-top: 20px;margin-left: 160px" type="text"
                       placeholder="输入问题..."
                       class="layui-input">
                <div class="layui-input-suffix">
                    <button id="question-send" type="button" style="margin-left: 83px;" lay-on="question-send"
                            class="layui-btn layui-btn-radius">发送
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script src="/layui/js/ajaxutil.js"></script>
<script src="/layui/js/appvariable.js"></script>
<script src="/layui/js/marked.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var jQuery = layui.$;
        var question_type = "chat";  // 默认当前在使用聊天功能
        var isFirstLoadDrawOpenAI = true;  // 是否首次加载绘图列表
        var isFirstLoadDrawTongyi = true;  // 是否首次加载绘图列表
        var isFirstLoadDrawXunfei = true;  // 是否首次加载绘图列表
        var isFirstLoadDrawQianfan = true;  // 是否首次加载绘图列表

        // 登录状态判断的方法
        function isLogin() {
            if (layui.data(login_user_info_key).authorization) {
                // 登录状态
                jQuery("#unlogin_btn_div").hide();
                jQuery("#username_span").html(layui.data(login_user_info_key).username);
                jQuery("#question-input").removeAttr("disabled");
                jQuery("#question-send").removeAttr("disabled");
            } else {
                // 未登录状态
                jQuery("#unlogin_btn_div").show();
                jQuery("#userinfo").hide();
                jQuery("#question-input").attr("disabled", "disabled");
                jQuery("#question-send").attr("disabled", "disabled");
            }
        }

        // 封装页面问答 HTML 的方法
        function showChatHtml(question, answer) {
            return '<div  class="layui-card layui-panel">\n' +
                '                        <div class="layui-card-header layui-font-16">\n' +
                question + '                            \n' +
                '                        </div>\n' +
                '                        <div class="layui-card-body">\n' +
                marked.parse(answer) + '                            \n' +
                '                        </div>\n' +
                '                    </div>';
        }

        // 封装页面绘图 HTML 的方法
        function showDrawHtml(question, answer) {
            return '<div class="layui-card layui-panel">\n' +
                '                        <div class="layui-card-header layui-font-16">\n' +
                question + '                            \n' +
                '                        </div>\n' +
                '                        <div class="layui-card-body">\n<img src="' +
                answer + '                            \n' +
                '">                        </div>\n' +
                '                    </div>';
        }


        //历史信息*****************************************************
        // 封装基础的聊天构建和展示方法
        function baseChatShowList(showDiv, res) {
            if (res.code === 200) {
                var html = "";
                for (let i = 0; i < res.data.length; i++) {
                    var answer = res.data[i];
                    html += showChatHtml(answer.title, answer.content);
                }
                jQuery("#" + showDiv).html(html);
            }
        }

        // 显示 OpenAI 对话的历史问答信息
        function showOpenAIChatHistory() {
            // 回调显示方法
            function callback(res) {
                baseChatShowList("chat-chatgpt-content", res);
            }

            authAjax(jQuery, "/openai/getchatlist", {}, callback);
        }

        // 显示 通义 模型对话的历史问答信息
        function showTongyiChatHistory() {
            // 回调显示方法
            function callback(res) {
                baseChatShowList("chat-tongyi-content", res);
            }

            authAjax(jQuery, "/tongyi/getchatlist", {}, callback);
        }

        // 显示 讯飞 模型对话的历史问答信息
        function showXunfeiChatHistory() {
            // 回调显示方法
            function callback(res) {
                baseChatShowList("chat-xunfei-content", res);
            }

            authAjax(jQuery, "/xunfei/getchatlist", {}, callback);
        }

        // 显示 千帆 模型对话的历史问答信息
        function showQianfanChatHistory() {
            // 回调显示方法
            function callback(res) {
                baseChatShowList("chat-wenxin-content", res);
            }

            authAjax(jQuery, "/qianfan/getchatlist", {}, callback);
        }

        // 封装基础的绘图构建和展示方法
        function baseDrawShowList(showDiv, res) {
            if (res.code === 200) {
                var html = "";
                for (let i = 0; i < res.data.length; i++) {
                    var answer = res.data[i];
                    html += showDrawHtml(answer.title, answer.content);
                }
                jQuery("#" + showDiv).html(html);
            }
        }

        // 显示 OpenAI 绘图的历史问答信息
        function showOpenAIDrawHistory() {
            if (isFirstLoadDrawOpenAI) {
                // 回调显示方法
                function callback(res) {
                    baseDrawShowList("draw-chatgpt-content", res);
                }

                authAjax(jQuery, "/openai/getdrawlist", {}, callback);
                isFirstLoadDrawOpenAI = false;
            }
        }

        // 显示 通义 绘图的历史问答信息
        function showTongyiDrawHistory() {
            if (isFirstLoadDrawTongyi) {
                // 回调显示方法
                function callback(res) {
                    baseDrawShowList("draw-tongyi-content", res);
                }

                authAjax(jQuery, "/tongyi/getdrawlist", {}, callback);
                isFirstLoadDrawTongyi = false;
            }
        }

        // 显示 讯飞 绘图的历史问答信息
        function showXunfeiDrawHistory() {
            if (isFirstLoadDrawXunfei) {
                // 回调显示方法
                function callback(res) {
                    baseDrawShowList("draw-xunfei-content", res);
                }

                authAjax(jQuery, "/xunfei/getdrawlist", {}, callback);
                isFirstLoadDrawXunfei = false;
            }
        }

        // 显示 千帆 绘图的历史问答信息
        function showQianfanDrawHistory() {
            if (isFirstLoadDrawQianfan) {
                // 回调显示方法
                function callback(res) {
                    baseDrawShowList("draw-wenxin-content", res);
                }

                authAjax(jQuery, "/qianfan/getdrawlist", {}, callback);
                isFirstLoadDrawQianfan = false;
            }
        }


        // 聊天 与 绘图 方法***************************************************************
        // 聊天回调的基础方法
        function baseChatCallback(showDiv, question, res) {
            layer.msg("This is 答案~");
            // 显示回答
            if (res.code === 200) {
                // 把新的拼在在前面
                jQuery("#" + showDiv).prepend(showChatHtml(question, res.data));
                jQuery("#question-input").val("");
            } else {
                // 错误返回响应信息
                layer.msg("哎呀,出错了: " + res.msg);
                jQuery("#question-input").val("");
            }
        }

        // 绘图回调的基础方法
        function baseDrawCallback(showDiv, question, res) {
            //显示回答
            if (res.code === 200) {
                //正常返回响应信息
                jQuery("#" + showDiv).prepend(showDrawHtml(question, res.data));
                jQuery("#question-input").val("");
            } else {
                // 错误返回响应信息
                layer.msg("哎呀,出错了: " + res.msg);
                jQuery("#question-input").val("");
            }
        }

        // 调用 open ai 的聊天功能
        function doOpenAIChat(question) {
            function callback(res) {
                baseChatCallback("chat-chatgpt-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/openai/chat", {"question": question}, callback);
        }

        // 调用 open ai 的绘图功能
        function doOpenAIDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-chatgpt-content", question, res)
            }

            // 向后端发送请求
            authAjax(jQuery, "/openai/draw", {"question": question}, callback);
        }

        // 调用 通义 大模型的聊天功能
        function doTongyiChat(question) {
            function callback(res) {
                baseChatCallback("chat-tongyi-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/tongyi/chat", {"question": question}, callback);
        }

        // 调用 通义 大模型的绘图功能
        function doTongyiDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-tongyi-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/tongyi/draw", {"question": question}, callback);
        }

        // 调用 讯飞 大模型的聊天功能
        function doXunfeiChat(question) {
            function callback(res) {
                baseChatCallback("chat-xunfei-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/xunfei/chat", {"question": question}, callback);
        }

        // 调用 讯飞 大模型的绘图功能
        function doXunfeiDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-xunfei-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/xunfei/draw", {"question": question}, callback);
        }

        // 调用百度 千帆 大模型的聊天功能
        function doQianfanChat(question) {
            function callback(res) {
                baseChatCallback("chat-wenxin-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/qianfan/chat", {"question": question}, callback);
        }

        // 调用 千帆 大模型的绘图功能
        function doQianfanDraw(question) {
            function callback(res) {
                baseDrawCallback("draw-wenxin-content", question, res);
            }

            // 向后端发送请求
            authAjax(jQuery, "/qianfan/draw", {"question": question}, callback);
        }


        // 页面加载完成之后执行的初始化事件
        layer.ready(function () {
            // 登录状态判断
            isLogin();

            // 显示OpenAI对话的历史问答信息
            showOpenAIChatHistory();

            // 显示TongYi聊天的历史问答信息
            showTongyiChatHistory();

            // 显示XunFei对话的历史问答信息
            showXunfeiChatHistory();

            // 显示QianFan对话的历史问答信息
            showQianfanChatHistory();


        });

        util.on('lay-on', {
            'chat-nav-show': function () {  // 显示对话的标签页
                jQuery("#chat-nav").show();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();

                // 标签页重置成第一个
                var showDivId = "chat-chatgpt-content";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#chat-nav").find("li").removeClass("layui-this");
                jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");

                // 显示聊天输入框
                jQuery("#footer-chat").show();

                question_type = "chat";
            },
            'draw-nav-show': function () {  // 显示绘图的标签页
                jQuery("#draw-nav").show();
                jQuery("#chat-nav").hide();
                jQuery("#discuss-nav").hide();

                // 标签页重置成第一个
                var showDivId = "draw-chatgpt-content";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#draw-nav").find("li").removeClass("layui-this");
                jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");

                // 显示聊天输入框
                jQuery("#footer-chat").show();

                // 显示历史绘图信息
                showOpenAIDrawHistory();
                showTongyiDrawHistory();
                showXunfeiDrawHistory();
                showQianfanDrawHistory();

                question_type = "draw";
            },
            'discuss-nav-show': function () { // 显示话题讨论的标签页
                jQuery("#discuss-nav").show();
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                // 隐藏聊天输入框
                jQuery("#footer-chat").hide();

                // 标签页重置成第一个
                var showDivId = "discuss-content";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
            },
            'nav-change-content': function (e) { // 根据标签页切换显示不同的内容
                var showDivId = jQuery(e).attr("lay-data");
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
            },
            'question-send': function () {  // 发送问题
                var question = jQuery("#question-input").val();
                if (question == null || question === "") {
                    layer.msg("请输入问题!");
                    return;
                }
                layer.msg("作答中~");
                if (question_type === "chat") {  // 聊天功能
                    // doOpenAIChat(question); // 调用 open ai 的聊天功能
                    // doTongyiChat(question); // 调用 通义 大模型的聊天功能
                    // doXunfeiChat(question); // 调用 讯飞 大模型的聊天功能
                    doQianfanChat(question); // 调用 千帆 大模型的聊天功能

                } else if (question_type === "draw") {  // 绘图功能
                    // doOpenAIDraw(question); // 调用 open ai 的绘图功能
                    // doTongyiDraw(question); // 调用 通义 大模型的绘图功能
                    // doXunfeiDraw(question); // 调用 通义 大模型的绘图功能
                    doQianfanDraw(question);  // 调用 千帆 大模型的绘图功能
                }

            },
            'doLogin': function () {
                // 弹出登录框
                layer.open({
                    type: 2,
                    title: 'LOGIN',
                    // area: ['580px', '410px'],
                    area: ['460px', '500px'],
                    offset: 'auto',
                    // anim: 'slideDown',
                    anim: 4,
                    content: '/login.html',
                    fixed: false, // 不固定
                    shadeClose: true,
                    maxmin: false,
                    shadeClose: true,
                    btnAlign: 'c',
                    shade: 0.5,
                    // move: false,
                });
            },
            'logout': function () {  // 退出事件
                layer.confirm('确认退出系统？', {
                    btn: ['不玩了', '再想想'], //按钮
                    title: ['退出', 'font-size: 18px;'],
                    area: 'auto',
                    anim: 2
                }, function (index) {
                    // 执行退出操作
                    layui.data(login_user_info_key, null);
                    // 显示登录按钮
                    isLogin();
                    layer.close(index);
                }, function () {
                });
            },
            'add-discuss': function () {
                // 点击添加话题导航栏
                jQuery("#add-discuss-nav").show();
                jQuery("#discuss-nav").hide();
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                // 隐藏聊天输入框
                jQuery("#footer-chat").hide();

                // 标签页重置成第一个
                var showDivId = "add-discuss-content";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");

            },
            'doAddDiscuss': function () {  // 添加话题
                // 1. 非空判断
                var title = jQuery("#discuss-title-input");
                var content = jQuery("#discuss-content-input");
                if (title.val() == null || title.val() === "") {
                    layer.msg("请输入标题!");
                    title.focus();
                    return;
                }
                if (content.val() == null || content.val() === "") {
                    layer.msg("请输入内容!");
                    content.focus();
                    return;
                }

                // 2. 调用后端接口
                function callBack(res) {
                    if (res.code === 200) {
                        layer.msg("添加成功!");
                        // 把输入框内容值为空
                        title.val("");
                        content.val("");
                    } else {
                        layer.msg("添加失败: " + res.msg);
                    }
                }

                var data = {
                    "title": title.val(),
                    "content": content.val(),
                };
                authAjax(jQuery, '/discuss/save', data, callBack);
                // 3. 展示操作结果
            },
            "show-my-discuss-list": function () {  // 点击我的列表导航
                jQuery("#add-discuss-content").hide();
                jQuery("#discuss-nav").hide();
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();

                // 隐藏聊天输入框
                jQuery("#footer-chat").hide();

                // 标签页重置成第一个
                var showDivId = "my-discuss-content";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");

                // 获取我的话题列表
                function callBack(res) {
                    if (res.code === 200) {
                        var discussList = res.data;
                        var discussListHtml = "";
                        for (var i = 0; i < discussList.length; i++) {
                            var discuss = discussList[i];
                            discussListHtml += '<div class="layui-col-md6">\n' +
                                '                                <div class="layui-card">\n' +
                                '                                    <div class="layui-card-header">\n' +
                                '<a lay-on="doShowDiscuss" lay-data="' + discuss.did + '">' + '                                        ' +
                                discuss.title + '</a>' + '\n' +
                                '                                        <a lay-on="doDeleteDiscuss" lay-data="' + discuss.did + '" href="javascript:;" style="position: absolute;right: 30px">删除</a>\n' +
                                '                                    </div>\n' +
                                '                                    <div class="layui-card-body">\n' +
                                '                                       ' +
                                discuss.content + '\n' +
                                '                                    </div>\n' +
                                '                                </div>\n' +
                                '                            </div>';
                        }
                        jQuery("#my-discuss-div").html(discussListHtml);
                    }
                }

                authAjax(jQuery, '/discuss/mylist', {}, callBack);
            },
            "doDeleteDiscuss": function (data) {    // 删除我的话题
                layer.confirm('想好了吗？', {
                    title: '删除话题',
                    btn: ['确定', '再想想'] //按钮
                }, function (index) {
                    // 执行删除事件
                    var did = jQuery(data).attr('lay-data');

                    function callBack(res) {
                        if (res.code === 200) {
                            layer.msg("删除成功!");
                            // 刷新我的话题列表
                            jQuery("#my-discuss-div").find("[lay-data='" + did + "']").parent().parent().parent().remove();
                        } else {
                            layer.msg("删除失败: " + res.msg);
                        }
                    }

                    authAjax(jQuery, '/discuss/delete', {"did": did}, callBack)
                    layer.close(index);
                }, function () {
                });
            },
            "doShowDiscuss": function (obj) {    // 点击查看话题详情
                jQuery("#add-discuss-content").hide();
                jQuery("#discuss-nav").hide();
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();

                // 隐藏聊天输入框
                jQuery("#footer-chat").hide();

                // 标签页重置成第一个
                var showDivId = "discuss-detail-div";
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容

                // 导航栏重置成第一个
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");

                // 获取话题详情
                var did = jQuery(obj).attr('lay-data');

                // 回调事件
                function callBack(res) {
                    if (res.code === 200) {
                        var discuss = res.data.discuss;
                        var commentList = res.data.commentList;
                        var html = '<h2>' + discuss.title + '</h2>\n' +
                            '                    <div style="padding-top: 10px">\n' +
                            '                        作者：<span>' + discuss.username + '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                        发表于：<span>' + discuss.createTime + '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                        阅读量：<span>' + discuss.readCount + '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                        点赞数：<span>' + discuss.supportCount + '</span>&nbsp;&nbsp;&nbsp;&nbsp;\n' +
                            '                    </div>\n' +
                            '                    <div style="padding-top: 30px">\n' + discuss.content + '\n' +
                            '                    </div>\n' +
                            '                    <div style="margin: 16px;">\n' +
                            '                        <i class="layui-icon layui-icon-praise" style="font-size: 15px; color: #d32c32;">点赞</i>\n' +
                            '                    </div>\n' +
                            '                    <hr>\n' +
                            '                    <div>\n' +
                            '                        <h3>发布评论</h3>\n' +
                            '                        <div class="grid-demo" style="margin-top: 20px;">\n' +
                            '                            <div class="layui-input-group">\n' +
                            '                                <div style="width: 110px;" class="layui-input-prefix">' + layui.data(login_user_info_key).username + '：</div>\n' +
                            '                                <textarea style="width: 900px;" id="comment-content" name="" placeholder="输入评论内容" class="layui-textarea"></textarea>\n' +
                            '                            </div>\n' +
                            '                            <div style="margin-top: 10px;margin-left: 110px;">\n' +
                            '                                <button type="button" lay-on="add-comment" lay-data="' + discuss.did + '" class="disscuss-add-btn2 layui-btn layui-btn-lg layui-btn-primary layui-btn-radius"> 发 送 </button>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '                    </div>\n' +
                            '                    <hr>\n' +
                            '                    <div>\n' +
                            '                        <h3 style="margin-bottom: 30px;">评论列表</h3>\n<div id = "comment-list">';
                        if (commentList != null && commentList.length > 0) {
                            for (var i = 0; i < commentList.length; i++) {
                                var comment = commentList[i];
                                html += ' <div style="margin-bottom: 30px;">\n' +
                                    '         <b>' + comment.username + '</b>：' + comment.content + '\n' +
                                    '     </div>\n';
                            }
                        } else {
                            html += "<h4>暂无评论</h4>"
                        }
                        jQuery("#" + showDivId).html(html + "</div></div>")
                    } else {
                        layer.msg("获取话题详情失败: " + res.msg);
                    }
                }

                authAjax(jQuery, "/discuss/detail", {did: did}, callBack);
            },
            "add-comment": function (obj){
                var did = jQuery(obj).attr('lay-data');
                var content = jQuery("#comment-content");
                if (content.val() == null || content.val().trim() == "") {
                    layer.msg("评论内容不能为空");
                    return;
                }
                function callBack(res) {
                    if (res.code === 200) {
                        layer.msg("评论成功");
                        var createHtml = '<div style="margin-bottom: 30px;">\n' +
                            '         <b>' + layui.data(login_user_info_key).username + '</b>：' + content.val() + '\n' +
                            '     </div>';
                        if (jQuery("#comment-list").find("div").length == 0) {
                            jQuery("#comment-list").html(createHtml);
                        } else {
                            jQuery("#comment-list").prepend(createHtml);
                        }
                        content.val("");
                    } else {
                        layer.msg("评论失败: " + res.msg);
                    }
                }
                authAjax(jQuery, "/comment/addComment", {did: did, content: content.val()}, callBack);
            }

        });

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>